import React from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux'
import { changeTab } from '../actions/tabAction.js'
import PureRenderMixin from 'react-addons-pure-render-mixin'
import { NavLink, withRouter } from 'react-router-dom';
import './index.scss';
/**
 * @constructor <BottomBar>
 * @description 首页底部tab栏
 */

class BottomBar extends React.Component {
    constructor(props) {
        super(props)
        this.shouldComponentUpdate = PureRenderMixin.shouldComponentUpdate.bind(this);
    }

    changeTab(item) {
      this.props.changeTabActions({
        activeKey: item.key
      })
    }

    renderItems() {
        let items = this.props.tabReducer.tabs;
        let activeKey = this.props.tabReducer.activeKey;
        return items.map((item, index) => {
            let cls;
            if(item.key === activeKey) {
                cls = item.key + ' btn-item active';
            } else {
                cls = item.key + ' btn-item';
            }

          return (
            <NavLink key={index} className={cls} to={"/" + item.key}  activeClassName="active" onClick={()=>this.changeTab(item)}>
              <div className="tab-icon"></div>
              <div className="btn-name">{item.name}</div>
            </NavLink>
          )
        })
    }

    render () {
      return (
        <div className="bottom-bar">
          {this.renderItems()}
        </div>
      )
    }
}
function mapStateToProps(state) {
    return {
        tabReducer: state.tabReducer
    }
}
function mapDispatchToProps(dispatch) {
    return {
        changeTabActions: bindActionCreators(changeTab, dispatch)
    }
}

export default withRouter(connect(
  mapStateToProps,
  mapDispatchToProps
)(BottomBar));
